<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            min-height: 100vh;
            background-color: #abefe9;
        }

        body>div {
            margin: 5px;
            border: #bfa 5px solid;
            background-color: #FFCCCC;
        }

        hr {
            background-color: red;
            height: 1px;
            border: 0;
        }

        .d1 {
            width: 200px;
            height: 100px;
            background-color: #ccf;
        }

        .d2 {
            width: 200px;
            height: 100px;
            background-color: #ccf;
            float: left;
        }
    </style>
</head>

<body>
    <div>
        <div class="d1">
        </div>
    </div>
    <div>
        <div class="d2">
            父元素未设置宽高，子元素脱离文档流，父元素高度会塌陷
        </div>
    </div>
    <!-- 
        根据W3C的标准，在页面中元素都-一个隐含的属性叫做Block Formatting Context
        简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
        当开启元素的BFC以后，元素将会具有如下的特性: 
        1.父元素的垂直外边距不会和子元素重叠
        2.开启BFC的元素不会被浮动元素所覆盖
        3.开启BFC的元素可以包含浮动的子元素
        如何开启元素的BFC
        
        1.设置元素浮动
            -会导致父元素宽度丢失、脱离文档流
        2.设置元素绝对定位
            -会导致父元素宽度丢失、脱离文档流
        3.设置元素为inline-block
            -会导致父元素宽度丢失
        4.将元素的overflow设置成任意非visible
            -overflow:hidden较常用
            -IE6及以下不支持
                -IE6中hasLayout类似BFC
                -可设置zoom:1;(放大倍数)解决高度坍塌。
                    -但其他浏览器及IE8以上不支持(16年数据,目前待定)
    -->
    <!-- 通过clear属性解决高度塌陷，详情见15.3 -->
    <div style="position: absolute;top: 250px;left: 250px;">
        <div class="d2">
            position: absolute;<br>top: 250px;<br>left: 250px;
            <hr>
            设置绝对定位
        </div>
    </div>
    <div style="margin:250px 0 15px;">
        分割阻挡线
    </div>
    <div style="overflow: hidden;">
        <div class="d2">
            overflow: hidden;
            <hr>
            overflow设置成非visible
        </div>
    </div>

</body>

</html>